<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		canvas{
			background: #eee;
		}
	</style>
</head>
<body>
<canvas id="qcanvas"></canvas>
<span id="tip">
			
		</span>
<script type="text/javascript" src="./example/js/Qcanvas.js"></script>
<script type="text/javascript">
	var qcanvas = new Qcanvas(["qcanvas",300,200]);
	var tip = document.getElementById('tip');

	var rect1 = qcanvas.qrect.rect({
		start:[20,20],
		borderColor:'red',
		fillColor:'green',
		drag:false,
		mouseout:function(){
			console.log('绿色块mouseout事件');
		tip.innerHTML ='<font color="green">绿色块mouseout事件</font>'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
		},
		mouseenter:function(){
			console.log('绿色块mouseenter事件');
		tip.innerHTML ='<font color="green">绿色块mouseenter事件</font>'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;


		}
	})


var rect = qcanvas.qrect.rect({
	start:[0,10],
	borderColor:'red',
	fillColor:'blue',
	drag:false,
	mouseup:function(){
		console.log('蓝色块mouseup事件');
		tip.innerHTML ='<font color="blue">蓝色块mouseup事件</font>'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
	},
	mousedown:function(){
		console.log('蓝色块mousedown事件');
		tip.innerHTML ='<font color="blue">蓝色块mousedown事件</font>'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
	},
	mousemove:function(){
		console.log('蓝色块mousemove事件');
		tip.innerHTML ='<font color="blue">蓝色块mousemove事件</font>'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
	},
	mouseout:function(){
		console.log('蓝色块mouseout事件');
		tip.innerHTML ='<font color="blue">蓝色块mouseout事件</font>'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
	}
})			
</script>
</body>
</html>